import React,{ Component,Fragment } from 'react';
import { Button,Modal,Input,Message } from 'antd';
import userMc from '../static/css/user.module.css';
class User extends Component{
  constructor(props){
    super(props);
    this.state = {
      name:'',
      sureName:'',
    };
  }
  render(){
    let doms = null;
    let userName = null;
    if(this.props.userName){
      userName = this.props.userName;
      doms = <span className={userMc.userName}>{userName}</span>;
    }
    else{
      doms = <Button onClick={this.joinUsBtn.bind(this)}>点击加入</Button>;
    }
    return(
      <Fragment>
        <img src={require("../static/images/user.png")} alt="" />
        {doms}
        <Modal 
          title="输入你的名字"
          cancelText="取消"
          okText="确定"
          centered={true}
          visible={this.props.visiable}
          confirmLoading={this.props.confirmLoading}
          onOk={this.handleOk.bind(this)}
          onCancel={this.handleCancel.bind(this)}
        >
          <Input placeholder="请输入名字" value={this.state.name} onChange={this.changeName.bind(this)} />
        </Modal>
      </Fragment>
    )
  }
  joinUsBtn(e){
    
    this.props.joinUsBtn();
  }
  handleOk(e){
    if(this.state.name){
      this.props.addUser(this.state.name);
    }
    else{
      Message.info('名字不能为空');
    }
    
  }
  handleCancel(e){
    this.props.handleCancel();
  }
  changeName(e){
    let name = e.target.value;
    this.setState({
      name:name
    })
  }
}

export default User;